<template>
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <qjtitle :title="title"></qjtitle>
      <el-form ref="queryForm" :inline="true">
        <qjsjfw @fun="sjfwfun"></qjsjfw>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData"> 查询 </el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel">
      <el-row class="mbBottom">
        <el-col :span="16">
          <el-button type="primary" @click="doAdd('form1')"> 新增 </el-button>
          <!-- <el-button type="primary" @click="doExportExcel"> 导出 </el-button> -->
        </el-col>
      </el-row>
      <el-table ref="table-main" :data="zbdata" height="calc(100% - 113px)" :loading="bgLoading" border>
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="报告单编号" align="center" prop="bgdbh" width="200" show-overflow-tooltip />
        <el-table-column label="报告日期" align="center" prop="bgrq" width="180" show-overflow-tooltip />
        <el-table-column label="事故报告者" align="center" prop="sgbgz" width="150" show-overflow-tooltip />
        <el-table-column label="仪器设备名称" align="center" prop="yqsbmc" width="200" show-overflow-tooltip />
        <el-table-column label="仪器设备编号" align="center" prop="yqsbbh" width="200" show-overflow-tooltip />
        <el-table-column label="型号规格" align="center" prop="xhg" width="200" show-overflow-tooltip />
        <el-table-column label="制造厂商" align="center" prop="zzcs" width="200" show-overflow-tooltip />
        <el-table-column label="事故发生时间" align="center" prop="sgfsrq" width="180" show-overflow-tooltip />

        <el-table-column label="仪器设备操作者签名理" align="center" class-name="small-padding">

          <el-table-column label="仪器设备操作" align="center" prop="yqsbcz" width="200" show-overflow-tooltip />
          <el-table-column label="签名日期" align="center" prop="qmrq1" width="180" show-overflow-tooltip />

        </el-table-column>
        <el-table-column label="事故调查者意见" align="center" class-name="small-padding">

          <el-table-column label="事故调查者" align="center" prop="sgdcz" width="150" show-overflow-tooltip />
          <el-table-column label="签名日期" align="center" prop="qmrq2" width="180" show-overflow-tooltip />

        </el-table-column>
        <el-table-column label="事故处理" align="center" class-name="small-padding">
          <el-table-column label="事故处理者" align="center" prop="sgclz" width="150" show-overflow-tooltip />
          <el-table-column label="签名日期" align="center" prop="qmrq3" width="180" show-overflow-tooltip />

        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="delbutton" @click="doUpdate(scope.row, scope.$index)"> 修改 </el-button>
            <el-button type="text" class="delbutton" @click="doDelete(scope.row, scope.$index)"> 删除 </el-button>
            <el-button type="text" @click="doView(scope.row, scope.$index)"> 查看 </el-button>
            <el-button type="text" @click="doViewFJ(scope.row, scope.$index)"> 查看附件 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <qjfy :total='total' @fun="qjfyfun"></qjfy>
    </page-panel-new>
    <el-dialog :title="dialogTitle" :visible.sync="Open1" class="qjztk" append-to-body>
      <div class="el-dialog-div">
        <el-form ref="form1" :model="formData" :validate-on-rule-change=false label-width="150px"
          :disabled="formDisable">


          <el-form-item label="报告单编号" prop="bgdbh" :rules="[
            { required: true, message: '请输入报告单编号', trigger: 'blur' }
          ]">
            <el-input v-model="formData.bgdbh" />
          </el-form-item>
          <el-form-item label="报告日期" prop="bgrq" :rules="[
            { required: true, message: '请输入报告日期', trigger: 'blur' }
          ]">
            <el-date-picker v-model="formData.bgrq" type="date" placeholder="选择报告日期" />
          </el-form-item>
          <el-form-item label="事故报告者" prop="sgbgz" :rules="[
            { required: true, message: '请输入事故报告者', trigger: 'blur' }
          ]">
            <el-input v-model="formData.sgbgz" />
          </el-form-item>
          <el-form-item label="仪器设备名称" prop="yqsbmc" :rules="[
            { required: true, message: '请输入仪器设备名称', trigger: 'blur' }
          ]">
            <el-input v-model="formData.yqsbmc" />
          </el-form-item>
          <el-form-item label="仪器设备编号" prop="yqsbbh" :rules="[
            { required: true, message: '请输入仪器设备编号', trigger: 'blur' }
          ]">
            <el-input v-model="formData.yqsbbh" />
          </el-form-item>
          <el-form-item label="型号规格" prop="xhg" :rules="[
            { required: true, message: '请输入型号规格', trigger: 'blur' }
          ]">
            <el-input v-model="formData.xhg" />
          </el-form-item>
          <el-form-item label="制造厂商" prop="zzcs" :rules="[
            { required: true, message: '请输入制造厂商', trigger: 'blur' }
          ]">
            <el-input v-model="formData.zzcs" />
          </el-form-item>
          <el-form-item label="事故发生时间" prop="sgfsrq" :rules="[
            { required: true, message: '请输入事故发生时间', trigger: 'blur' }
          ]">
            <el-date-picker v-model="formData.sgfsrq" type="datetime" placeholder="选择事故发生时间" />
          </el-form-item>
          <el-form-item label="仪器设备操作" prop="yqsbcz" :rules="[
            { required: true, message: '请输入仪器设备操作', trigger: 'blur' }
          ]">
            <el-input v-model="formData.yqsbcz" />
          </el-form-item>
          <el-form-item label="签名日期" prop="qmrq1" :rules="[
            { required: true, message: '请输入签名日期', trigger: 'blur' }
          ]">
            <el-date-picker v-model="formData.qmrq1" type="date" placeholder="选择签名日期" />
          </el-form-item>
          <el-form-item label="事故调查者" prop="sgdcz" :rules="[
            { required: true, message: '请输入事故调查者', trigger: 'blur' }
          ]">
            <el-input v-model="formData.sgdcz" />
          </el-form-item>
          <el-form-item label="签名日期" prop="qmrq2" :rules="[
            { required: true, message: '请输入签名日期', trigger: 'blur' }
          ]">
            <el-date-picker v-model="formData.qmrq2" type="date" placeholder="选择签名日期" />
          </el-form-item>
          <el-form-item label="事故处理者" prop="sgclz" :rules="[
            { required: true, message: '请输入事故处理者', trigger: 'blur' }
          ]">
            <el-input v-model="formData.sgclz" />
          </el-form-item>
          <el-form-item label="签名日期" prop="qmrq3" :rules="[
            { required: true, message: '请输入签名日期', trigger: 'blur' }
          ]">
            <el-date-picker v-model="formData.qmrq3" type="date" placeholder="选择签名日期" />
          </el-form-item>

          <div v-if="!formDisable">
            <el-form-item class="wenddd" label="该设备用于检测的参数">
              <el-upload ref="upload" :limit="1" action="" :auto-upload="false" drag :file-list="dgfjwj.uploadFiles"
                name="upfile" :on-change="handleUploadChange_d" :on-remove="handleUploadRemove_d"
                :before-remove="handleUploadBeforeRemove_d">
                <i class="el-icon-upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
            <el-form-item class="fjfff" label="附件">
              <el-upload ref="upload" :limit="10" action="" :auto-upload="false" drag :file-list="hdfjwj.uploadFiles"
                name="upfile_fj" :on-change="handleUploadChange_h" :on-remove="handleUploadRemove_h"
                :before-remove="handleUploadBeforeRemove_h">
                <i class="el-icon-upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!formDisable" type="primary" @click="doSubmit"> 保存 </el-button>
        <el-button class="cancelBtn" @click="doClose"> 关 闭 </el-button>
      </div>
    </el-dialog>
    <qjckfj ref="ckfj"></qjckfj>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import dayjs from 'dayjs'
export default Vue.extend({
  name: 'Sbgl-yqsbsg-sbczzqm',
  data() {
    return {
      title: '设备操作者签名', //页面标题
      jklj: 'yqsbgl/yqsbsg/sbczzqm', // 接口路径
      dialogTitle: '', // 弹框标题
      bgLoading: false, // 表格加载状态
      Open1: false, //弹框状态
      zbdata: [], //主表格数据
      xlsj1: [],//查询选择器 下拉数据
      xlsj2: [],//查询选择器 下拉数据
      xlsj3: [],//查询选择器 下拉数据
      xlsj4: [],//查询选择器 下拉数据
      xlsj5: [],//查询选择器 下拉数据
      xlsj6: [],//查询选择器 下拉数据
      xlsj7: [],//查询选择器 下拉数据
      xlsj8: [],//查询选择器 下拉数据
      xlsj9: [],//查询选择器 下拉数据
      xlsj10: [],//查询选择器 下拉数据
      xlsj11: [],//查询选择器 下拉数据
      optype: 'xz', //操作类型
      formData: {
        bgdbh: '', // 报告单编号
        bgrq: '', // 报告日期
        sgbgz: '', // 事故报告者
        yqsbmc: '', // 仪器设备名称
        yqsbbh: '', // 仪器设备编号
        xhg: '', // 型号规格
        zzcs: '', // 制造厂商
        sgfsrq: '', // 事故发生时间
        yqsbcz: '', // 仪器设备操作
        qmrq1: '', // 第一个签名日期（对应事故报告相关操作）
        sgdcz: '', // 事故调查者
        qmrq2: '', // 第二个签名日期（对应事故调查相关操作）
        sgclz: '', // 事故处理者
        qmrq3: '' // 第三个签名日期（对应事故处理相关操作）
      }, //录入Form数据
      formDisable: false, //表单禁用状态
      queryParams: {
        sel_qsrq: null,
        sel_jzrq: null,
        start: 0,
        limit: 20,
      }, //查询参数
      total: 0,
      dgfjwj: {  //上传配置
        uploadFiles: [], //已上传文件列表
      },
      hdfjwj: {  //上传配置
        uploadFiles: [], //已上传文件列表
      }
    }
  },
  computed: {
  },
  watch: {
    optype: {
      handler(newVal, oldVal) {
        if (newVal == 'ck') {
          this.formDisable = true;
        } else {
          this.formDisable = false;
        }
      },
      deep: true,
    },
    queryParams: {
      handler(newVal, oldVal) {
        this.getxlsj1();
      },
      deep: true,
    },
  },
  mounted() {
    this.getListData();
    this.getxlsj1();
  },
  methods: {
    czcxfun() { // 清空表单
      this.formData = {
        bgdbh: '', // 报告单编号
        bgrq: '', // 报告日期
        sgbgz: '', // 事故报告者
        yqsbmc: '', // 仪器设备名称
        yqsbbh: '', // 仪器设备编号
        xhg: '', // 型号规格
        zzcs: '', // 制造厂商
        sgfsrq: '', // 事故发生时间
        yqsbcz: '', // 仪器设备操作
        qmrq1: '', // 第一个签名日期（对应事故报告相关操作）
        sgdcz: '', // 事故调查者
        qmrq2: '', // 第二个签名日期（对应事故调查相关操作）
        sgclz: '', // 事故处理者
        qmrq3: '' // 第三个签名日期（对应事故处理相关操作）
      }
      this.dgfjwj.uploadFiles = [];
      this.hdfjwj.uploadFiles = [];
    },
    resetQuery() {  //查询参数重置按钮事件
      this.queryParams = {
        sel_qsrq: null,
        sel_jzrq: null,
        start: 0,
        limit: 20,
      }
      this.getListData()
    },
    getxlsj1() { //获取 选择器数据
      try {
        const param = {
          p_qsrq: this.queryParams.sel_qsrq,
          p_jzrq: this.queryParams.sel_jzrq,
        };


      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    qjfyfun(e) {//分页
      this.queryParams.start = e.start;
      this.queryParams.limit = e.limit;
    },
    sjfwfun(e, e1) {//日期范围选择器事件
      this.queryParams.sel_qsrq = e;
      this.queryParams.sel_jzrq = e1;
    },
    handleUploadChange_d(file, filelist) { //上传文件改变事件
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      this.$uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.dgfjwj.uploadFiles = filelist;
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.dgfjwj.uploadFiles = filelist;
        }
      })
        .catch(() => {
          this.$message.error({ content: '上传失败!', placement: 'center' });
          filelist.splice(filelist.indexOf(file), 1);
          this.dgfjwj.uploadFiles = filelist;
        });
    },
    handleUploadChange_h(file, filelist) {
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      this.$uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.hdfjwj.uploadFiles = filelist;
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.hdfjwj.uploadFiles = filelist;
        }
      })
        .catch(() => {
          this.$message.error({ content: '上传失败!', placement: 'center' });
          filelist.splice(filelist.indexOf(file), 1);
          this.hdfjwj.uploadFiles = filelist;
        });
    },
    handleUploadBeforeRemove_d(file) {//上传文件删除前事件
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },
    handleUploadBeforeRemove_h(file, filelist) {
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },
    handleUploadRemove_d(file, filelist) {//上传文件删除事件
      this.dgfjwj.uploadFiles = filelist;
      if (file.fileid && file.id) {
        this.$submit_delfile({ fileid: file.fileid, id: file.id }, this.jklj)
          .then((res) => {
            if (res.success) {
              this.$message.success({ content: '删除成功!', placement: 'center' })
            } else {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            }
          })
          .catch(() => {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          });
      }
    },
    handleUploadRemove_h(file, filelist) {
      this.hdfjwj.uploadFiles = filelist;
      if (file.fileid && file.fjid) {
        this.$submit_delfile_fj({ fileid: file.fileid, fjid: file.fjid, tzggid: this.formData.id }, this.jklj)
          .then((res) => {
            if (res.success) {
              this.$message.success({ content: '删除成功!', placement: 'center' })
            } else {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            }
          })
          .catch(() => {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          });
      }
    },
    getListData() { //获取主表格查询数据
      try {
        this.bgLoading = true
        this.$getListData(this.queryParams, this.jklj).then((res) => {
          if (res.success) {
            this.zbdata = res.rows;
            this.total = res.total;
          } else {
            this.zbdata = []
            this.$message.error({ content: '请重新搜索!', placement: 'center' })
          }
        })
      } catch (error) {
        this.bgLoading = false;
        console.warn('接口提示', error);
      }
    },
    doSubmit() {//处理保存按钮事件
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          var _data = { ...this.formData };
          var _submitData = new FormData();
          for (let key in _data) {
            if (_data[key] && _data[key] instanceof Date) {
              _data[key] = dayjs(_data[key]).format('YYYY-MM-DD');
            }
            _submitData.append(key, _data[key]);
          }
          var _fileList_fj = [];
          var _fileList = [];
          if (this.hdfjwj && this.hdfjwj.uploadFiles) {
            this.hdfjwj.uploadFiles.forEach(file => {
              if (file.status == 'ready' && file.minioID) {
                _fileList_fj.push(file);
              }
            });
          }
          if (this.dgfjwj && this.dgfjwj.uploadFiles) {
            this.dgfjwj.uploadFiles.forEach(file => {
              if (file.status == 'ready' && file.minioID) {
                _fileList.push(file);
              }
            });
          }
          _submitData.append("fileList_fj", JSON.stringify(_fileList_fj));
          _submitData.append("fileList", JSON.stringify(_fileList));
          this.$submit(_submitData, this.jklj)
            .then((res) => {
              if (res.success) {
                this.$message.success({ content: '保存成功!', placement: 'center' })
                this.Open1 = false;
                this.getListData()
                this.getxlsj1()
              } else {
                this.$message.error({ content: '保存失败!', placement: 'center' })
              }
            })
            .catch(() => {
              this.$message.error({ content: '保存失败!', placement: 'center' })
            });
        }
      });
    },
    doAdd(formName) {//处理新增按钮事件
      this.Open1 = true;
      this.optype = 'xz';
      this.czcxfun();
      this.formData.optype = 'add';
      this.dialogTitle = this.title + ' >> 新增';
    },
    doUpdate(row) {//处理修改按钮事件
      this.czcxfun();
      this.xzsj = row;
      this.Open1 = true;
      this.optype = 'xg';
      this.dialogTitle = this.title + ' >> 修改';
      this.formData = { ...row };
      this.formData.optype = 'update';
      // 附件查看
      const param = {
        start: 0,
        limit: 100,
        sel_tzggid: this.formData.id,
      };
      this.$getListData_fj(param, this.jklj).then((res) => {
        if (res.success) {
          this.hdfjwj.uploadFiles = res.rows;
          this.hdfjwj.uploadFiles.forEach(file => {
            file.name = file.filename;
            file.status = 'success';
          });
        } else {
          this.hdfjwj.uploadFiles = []
          this.$message.error({ content: '请重新搜索!', placement: 'center' })
        }
      })
      const param1 = {
        start: 0,
        limit: 100,
        sel_tzggid: this.formData.fileid,
      };
      this.$getListData(param1, this.jklj).then((res) => {
        if (res.success) {
          if (res.rows[0].fileid) {
            this.dgfjwj.uploadFiles = res.rows;
            this.dgfjwj.uploadFiles.forEach(file => {
              file.name = file.filename;
              file.status = 'success';
            });
          } else {
            this.dgfjwj.uploadFiles = [];
          }
        } else {
          this.dgfjwj.uploadFiles = []
          this.$message.error({ content: '请重新搜索!', placement: 'center' })
        }
      })
    },
    doDelete(row) {//处理删除按钮事件
      return this.$modal.confirm("是否确认删除该条数据？")
        .then(() => {
          this.$submit_delete({ id: row.id }, this.jklj)
            .then((res) => {
              if (res.success) {
                this.getListData()
                this.$message.success({ content: '删除成功!', placement: 'center' })
              } else {
                this.$message.error({ content: '删除失败!', placement: 'center' })
              }
            })
            .catch(() => {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            });
        })
        .catch(() => {
        });
    },
    //处理导出按钮事件
    doExportExcel() {
      var params = { ...this.queryParams };
      for (let key in params) {
        if (/^sel_/.test(key)) {
          var new_key = key.replace(/^sel_/, 'p_');
          params[new_key] = params[key];
        }
      }
      try {
        if (!this.queryParams) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        this.$exportExcel(this.download, params, filename, this.jklj);
      } catch (error) {
      }
    },
    doView(row) {//处理查看按钮事件
      this.Open1 = true;
      this.optype = 'ck';
      this.dialogTitle = this.title + ' >> 查看';
      this.formData = { ...row };
    },
    doViewFJ(row) {//处理查看附件按钮事件
      this.$refs.ckfj.dkfj({ start: 0, limit: 100, sel_tzggid: row.id, }, this.jklj);
    },
    doClose() {//处理关闭事件
      this.Open1 = false;
    },
  },
})
</script>
<style lang="less" scoped>
.app-container {
  height: 100%;
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}



::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-radio.is-disabled .el-radio__inner,
::v-deep .el-radio.is-disabled .el-radio__label,
::v-deep .el-checkbox.is-disabled .el-checkbox__inner,
::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  background-color: #f6f6f6 !important;
  /* 示例：改变背景颜色 */
  color: #333 !important;
  /* 示例：改变文字颜色 */
}

::v-deep .el-upload.el-upload--text {
  margin: 0 !important;
}

.mainSearchPanel .page-header-title {
  font-size: 16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin: 0;
  padding: 0;
  margin: 10px 0;
}

.mainSearchPanel .el-divider--horizontal {
  margin: 0 !important;
  margin-top: 10px;
}
</style>
